<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			img{
				margin: 20px 18px;
				filter: grayscale(100%);
			}
			img:hover{
				filter: grayscale(0%);
			}
		</style>
	</head>
	<body>
		<img src="img/tu@2x.png"/>
		<img src="img/tu@2x.png"/>
		<img src="img/tu@2x.png"/>
		<img src="img/tu@2x.png"/>
		<img src="img/tu@2x.png"/>
		
	</body>
	<script>
	</script>
	<!--
		touchstart------手机端的点击事件只能用DOM2级事件写
		touchend------手机端的点击事件只能用DOM2级事件写
		可以结合写一个切换事件
 	-->
</html>

<!--
	笔记
	resize属性和属性值
	both------可以调整宽高
	none------不可以调整大小
	vertical------只可以调整x轴的大小
	horizontal------只可以调整y轴的大小
	inherit------继承父级元素的resize的属性值
	
	box-sizing属性和属性值
	content-box------标准盒模型，默认值，这是 CSS2.1 指定的宽度和高度的行为元素实际宽度=内容宽度+padding+border
	border-box------怪异盒模型，也叫IE盒模型，这是CSS3指定的宽度和高度的行为元素实际高度=指定的高度（padding和border计算在内）
	inherit------从父级元素继承
-->
